<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

       body {
            background: #23384e;
            font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
        }

        .search,
        .search .inner-box,
        .search .box,
        .search .select,
        .search a {
            background: url(../images/search.jpg) no-repeat;
        }

        .search,
        .search .box,
        .search .inner-box {
            height: 34px;
        }

        .search {
            position: relative;
            width: 350px;
            margin: 10px auto;
        }

        .search .box {
            background-position: right 0;
        }

        .search .inner-box {
            background-repeat: repeat-x;
            background-position: 0 -34px;
            margin: 0 20px 0 40px;
        }

        .search .select {
            float: left;
            color: #fff;
            width: 190px;
            height: 22px;
            border: none;
            cursor: pointer;
            margin-top: 4px;
            line-height: 22px;
            padding-left: 10px;
            background-position: 0 -68px;
        }

        .search a {
            float: left;
            width: 80px;
            height: 24px;
            color: #333;
            letter-spacing: 4px;
            line-height: 22px;
            text-align: center;
            text-decoration: none;
            background-position: 0 -90px;
            margin: 4px 0 0 10px;
        }

        .search a:hover {
            color: #f60;
            background-position: -80px -90px;
        }

        .search ul {
            position: absolute;
            top: 26px;
            left: 40px;
            color: #fff;
            width: 198px;
            background: #2b2b2b;
            border: 1px solid #fff;
            display: none;
        }

        .search ul li {
            height: 25px;
            line-height: 24px;
            cursor: pointer;
            padding-left: 10px;
            margin-bottom: -1px;
            border-bottom: 1px dotted #fff;
        }

        .search ul li:hover,
        .search ul li.active {
            background: #8b8b8b;
        }
    </style>
	</head>

	<body>
		<div class="search">
			<div class="box">
				<div class="inner-box">
					<input type="text" id="keyword" class="select" autocomplete="off" placeholder="请选择游戏名称">
					<a href="#">搜索</a>
				</div>
			</div>
			<ul class="list">
				<li>地下城与勇士</li>
				<li>魔兽世界（国服）</li>
				<li>魔兽世界（台服）</li>
				<li>热血江湖</li>
				<li>大话西游II</li>
				<li>QQ幻想世界</li>
			</ul>
		</div>

		<script>
			/*
            实现的功能：
                【1】搜索框获取焦点的时候 显示下拉下单
                    【1】获取元素
                【2】搜索框失去焦点时候 隐藏下拉菜单

                一下两个功能只有在获取焦点的时候才会有用
                【3】按下鼠标的上下键 可以动态选中 li元素（给li元素添加 active 这个class名）
                【4】当按下 enter键的时候，把拥有 activeclass名的元素的内容 赋值给搜索框
         */

			var list = document.querySelector('.list');
			var search = document.querySelector('.search');
			var keyword = document.querySelector('#keyword')
			var li = document.getElementsByTagName('li')
			var timer;
			// list.style.display='block'	
			keyword.onfocus = function() {
				list.style.display = 'block';


				for (i = 0; i < li.length; i++) {
					// 0 1 2 3 4 5
					var idx = i;
					keyword.onkeydown = function(e) {
						e = e || window.event;
						
						for(j=0;j<li.length;j++){
							li[j].className=''
						}
						
						if(e.keyCode===38){
							li[idx].className='active'
							idx--
						}
						
					if(idx<0){
						idx=li.length-1;	
					}
					
				if(e.keyCode===13){
						keyword.value =li[idx].innerHTML;
						list.style.display = 'none';
						keyword.blur();
						
					}
					if(idx>5){
						idx=0;
					}
					if(e.keyCode===40){
						li[idx].className='active'
						idx++
					}
					
					}
				}

			}
			
			for (var i = 0; i < li.length; i++) {

				var idx = i;
				li[idx].onclick = function() {
					var res = this.innerHTML;
					keyword.value = res;
					list.style.display = 'none';
					 for (var j = 0; j < li.length; j++) {
						li[j].className = ''

					} 

					this.className = 'active'


				}
				

			}
			

		</script>
	</body>

</html>
